<!doctype html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
        <meta name="renderer" content="webkit" />
	    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no,width=device-width,height=device-height">
        <title>Our Science</title>
        <link href="favicon.ico" rel="shortcut icon">
        <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
        <script src="./js/common/vue.js"></script>
        <script src="./js/common/vue-resource.js"></script>
        <link rel="stylesheet" href="css/common/swiper.css">
        <link rel="stylesheet" href="css/common/base.css">
        
        <link rel="stylesheet" href="css/common/media.css">
        <link rel="stylesheet" href="css/science.css">
    </head>
    <body>
        <div id="contn">
            <v-header></v-header>
            <v-main :parent-nav="nav" :parent-currentind="currentind" :parent-pipeline="pipeline" :parent-stages="stages" :parent-blocks="blocks" :parent-publist="publist"></v-main>
            <v-footer></v-footer>
        </div>
        <template id="vMain">
            <main>
                <div class="heading">
                    <div class="storeBox" v-if="parentNav.length" v-html="parentNav[parentCurrentind].htmlContent"></div>
                    <p class="pic fill"><img v-if="parentNav.length" :src="parentNav[parentCurrentind].imagePath" class="obj-c" alt=""></p>
                    <div class="fluid flex flex-align-items fill">
                        <div class="txt ready">
                             <p class="delay-1" v-if="parentNav.length">{{parentNav[parentCurrentind].enName}}</p>
                             <p class="delay-2"></p>
                        </div>
                    </div>
                </div>
                <div class="tips">
                    <p></p>
                </div>
                <div id="pipeline">
                    <p class="ttl ready" v-if="parentBlocks.length">{{parentBlocks[0].name}}</p>
                    <div class="box fluid">
                        <div class="level ready overself fillAft flex-align-items flex">
                            <p v-for="(item,i) in parentStages">{{item}}</p>
                        </div>
                        <!--
                        <div class="dList">
                            <div v-if="parentPipeline" v-for="(item,i) in parentPipeline.process" class="itm ready overself flex flex-align-items">
                                <p class="t" v-html="item.name"></p>
                                <div :class='["process","fillAft"]' :data-width='"calc(100% / " + parentPipeline.stages.length + " * " + item.curr + ")"'>
                                    <p class="flex flex-align-items" v-if="parentPipeline"><span>{{parentPipeline.stages[(item.curr - 1)]}}</span></p>
                                </div>
                            </div>
                        </div>
                        -->
                        <div class="dList" v-for="(item,i) in parentPipeline">
                            <p class="cate">{{item.cate}}</p>
                            <div v-if="item.list.length" v-for="(sonItem,n) in item.list" class="itm ready overself flex flex-align-items">
                                <div class="t">
                                    <p class="title">{{sonItem.title}}</p>
                                    <p class="desc">{{sonItem.description}}</p>
                                </div>
                                <div class="data">
                                    <div :class='["process","fillAft"]' :data-width='"calc(100% / " + parentStages.length + " * " + sonItem.ext01 + ")"'>
                                        <p class="flex flex-align-items" v-if="parentPipeline"><span>{{sonItem.ext02}}</span></p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div id="article" class="fluid box">
                    <p class="ttl ready" v-if="parentBlocks.length">{{parentBlocks[1].name}}</p>
                    <p class="des ready" v-if="parentBlocks.length">{{parentBlocks[1].description}}</p>
                    <img class="ready" v-if="parentBlocks.length" :src="parentBlocks[1].imagePath" alt="">
                    <div class="t" v-if="parentBlocks.length" v-html="parentBlocks[1].htmlContent">
                    </div>
                </div>
                <div id="pblctns" class="fluid box">
                    <p class="ttl ready" v-if="parentBlocks.length">{{parentBlocks[2].name}}</p>
                    <p class="des ready" v-if="parentBlocks.length">{{parentBlocks[2].description}}</p>
                    <div class="list">
                        <div class="mid">
                            <div class="itm ready overHalf" v-for="(item,i) in parentPublist">
                                <div class="storeBox" v-html="item.htmlContent"></div>
                                <p class="date">{{item.date}}</p>
                                <div class="t"></div>
                                <p class="dwld">Downnload</p>
                            </div>
                        </div>
                    </div>
                </div>
           </main>
        </template>
        
        <script src="js/common/swiper.js"></script>
        <script src="js/common/jquery.js"></script>
        <script src="./js/common/dataUrl.js"></script>
        <script src="js/common/header.js"></script>
        <script src="js/common/footer.js"></script>
        <script>
            var contn = new Vue({
                el:'#contn',
                data:{
                    currentind:'',
                    nav:[],
                    stages:[],
                    pipeline:[],
                    blocks:[],
                    publist:[]
                },
                methods:{
                    writingWeb:function(){
                        //获取heading
                        axios.get(dataUrl + 'api/getNavbar',{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            console.log(res.data.data);
                            this.nav = res.data.data;
                            for(var a = 0;a < res.data.data.length;a++){
                                if(window.location.href.indexOf('html') < 0){
                                    this.currentind = 0;
                                }else if(window.location.href.indexOf(res.data.data[a].visitUrl) >= 0){
                                    this.currentind = a;
                                }
                            }
                            //获取pipeline所有阶段
                            this.stages = this.blocks[0].description.split(',');

                            setTimeout(function(){
                                $('main .heading .fluid .txt p:eq(1)').text($('main .heading .storeBox p:eq(0)').text());
                                $('main .tips p').text($('main .heading .storeBox p:eq(1)').text());
                            },)
                        });
                        //获取pipeline项目
                        axios.post(dataUrl + 'api/v2/getNavbarDetails',{id:80},{
							headers:{
								Authorization: headers
							}
						})
						.then((res) => {
							console.log(res.data.data);
                            for(var s = 0;s < res.data.data.length;s++){
                                var obj = {};
                                
                                obj.cate = res.data.data[s].name;
                                obj.id = res.data.data[s].id;
                                obj.list = [];
                                this.pipeline.push(obj);
                            }
                            for(var p = 0;p < this.pipeline.length;p++){
                                axios.post(dataUrl + 'api/v2/getArchives',{desc:1,ext06:0,id:this.pipeline[p].id,size:10000,page:1},{
                                    headers:{
                                        Authorization: headers
                                    }
                                })
                                .then((res) => {
                                    for(var c = 0;c < this.pipeline.length;c++){
                                        if(res.data.data.list[0].category == this.pipeline[c].cate){
                                            this.pipeline[c].list = res.data.data.list;
                                        }
                                    }
                                });    
                            }
                            setTimeout(function(){
                                
                                
                            },10)
                            
                        });

                        //获取栏目
						axios.post(dataUrl + 'api/v2/getNavbarDetails',{id:74},{
							headers:{
								Authorization: headers
							}
						})
						.then((res) => {
							//console.log(res.data.data);
                            this.blocks = res.data.data;
                        });

                        
                        
                        //获取列表
                        axios.post(dataUrl + 'api/getArchivesDetails',{ext06:0,id:82,size:10000,page:1},{
                            headers:{
                                Authorization: headers
                            }
                        })
                        .then((res) => {
                            //console.log(res.data.data);
                            this.publist = res.data.data.list;
                            for(var d = 0;d < this.publist.length;d++){
                                var date = this.publist[d].createTime.split(' ')[0].split('-');
                                var month = date[1];
                                var dateStr = date[0] + ' ';
                                switch(month){
                                    case '1':
                                        dateStr += 'January';
                                        break;
                                    case '2':
                                        dateStr += 'Feburary';
                                        break;
                                    case '3':
                                        dateStr += 'March';
                                        break;
                                    case '4':
                                        dateStr += 'April';
                                        break;
                                    case '5':
                                        dateStr += 'May';
                                        break;
                                    case '6':
                                        dateStr += 'June';
                                        break;
                                    case '7':
                                        dateStr += 'July';
                                        break;
                                    case '8':
                                        dateStr += 'August';
                                        break;
                                    case '9':
                                        dateStr += 'September';
                                        break;
                                    case '10':
                                        dateStr += 'October';
                                        break;
                                    case '11':
                                        dateStr += 'November';
                                        break;
                                    case '12':
                                        dateStr += 'December';
                                        break;
                                }
                                this.publist[d].date = dateStr;
                            }

                            setTimeout(function(){
                                $('main #pblctns .list .mid .itm .t').append($('main #pblctns .list .mid .itm .storeBox p:eq(0)'));
                            },10)
                        })
                    }
                },
                created:function(){
                    this.writingWeb();
                },
                mounted:function(){
                    ifMounted = true;
                },
                components:{
                    vMain:{
                        template: '#vMain',
                        methods:{
                            
                        },
                        props:['parentNav','parentCurrentind','parentPipeline','parentStages','parentBlocks','parentPublist'],
                    },
                },
            })
        </script>
        <script src="js/common/common.js"></script>
        <script src="js/common/animation.js"></script>
    </body>
</html>